import React from 'react';
import { Button, Typography, Select } from 'antd';

const { Text } = Typography;
const { Option } = Select;

interface PaginationProps {
  current: number;
  pageSize: number | undefined;
  length: number;
  total: number;
  showCount: () => void;
  onChange: (type: string) => void;
  onShowSizeChange: (pageSize: number) => void;
}

class Pagination extends React.PureComponent<PaginationProps> {
  render() {
    const {
      current,
      pageSize = 10,
      length,
      total,
      showCount,
      onChange,
      onShowSizeChange,
    } = this.props;

    return (
      <Typography className="marginT12 spaceBetween flexWrap">
        <Typography className="marginB8">
          <Text>订单总数：</Text>
          <Button
            type="primary"
            size="small"
            className="smallButton"
            onClick={showCount}
          >
            查看
          </Button>
          {total !== 0 && <Text className="marginL16">共<Text strong>{total}</Text>条</Text>}
          {total === 0 && <Text className="marginL16" type="danger">{'(点击\'查看\'获取总数)'}</Text>}
        </Typography>
        <Typography className="marginB8">
          <Select value={pageSize} onChange={onShowSizeChange}>
            <Option value={10}>10条/页</Option>
            <Option value={20}>20条/页</Option>
            <Option value={50}>50条/页</Option>
            <Option value={100}>100条/页</Option>
          </Select>
          <Button
            type="primary"
            size="small"
            htmlType="submit"
            className="smallButton marginL16"
            disabled={current === 1}
            onClick={() => onChange('prev')}
          >
            上一页
          </Button>
          <Button
            type="primary"
            size="small"
            htmlType="submit"
            className="smallButton marginL16"
            disabled={length === 0
              || length < pageSize || (total > 0 && Math.ceil(total / pageSize) === current)}
            onClick={() => onChange('next')}
          >
            下一页
          </Button>
        </Typography>
      </Typography>
    );
  }
}

export default Pagination;
